<!--新增用户-->
<template>
  <el-dialog
    class="base-dialog"
    :custom-class="'panna-dialog_small'"
    :title="title"
    :visible.sync="dialogVisible"
    align="center"
    :before-close="handleClose"
    @closed="closedDialog"
  >
    <p slot="title">{{ title }}</p>

    <el-form
      ref="formData"
      v-loading="formLoading"
      :rules="formRules"
      :model="formData"
      label-width="100px"
    >
      <el-form-item :label="dataList.OldPassword" prop="oldPassWord">
        <el-input v-model="formData.oldPassWord" :placeholder="dataList.EnterOldPassword" />
      </el-form-item>

      <el-form-item :label="dataList.NewPassword" prop="password">
        <el-input
          v-model="formData.password"
          type="password"
          :placeholder="dataList.EnterNewPassword"
        />
      </el-form-item>

      <el-form-item :label="dataList.ConfirmNewPassword" prop="repeatPwd">
        <el-input
          v-model="formData.repeatPwd"
          type="password"
          :placeholder="dataList.EnterConfirmNewPassword"
        />
      </el-form-item>
    </el-form>

    <span slot="footer" class="base-dialog-footer">
      <el-button v-loading="submitLoad" type="primary" @click="submitForm"
        >{{ btn.Save }}</el-button
      >
      <el-button @click="handleClose">{{ btn.Cancel }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { UpdatePassword } from "../../../api/Permission/PermissionUser.js";
import { validatePass } from "@/utils/validate"
export default {
  name: "PasswordDialog",
  props: {
    value: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      title: this.$t("Permission.PermissionUser.ChangePassword"),
      dialogVisible: false,
      submitLoad: false,
      submitReadOnly: false,
      formData: {
        oldPassWord: "",
        password: "",
        repeatPwd: "",
      },
      formRules: {
        oldPassWord: [
          { required: true, message: this.$t("Permission.PermissionUser.EnterOldPassword") },
          { validator: this.validatePassword },
        ],
        password: [
          { required: true, message: this.$t("Permission.PermissionUser.EnterNewPassword") },
          { validator: this.validatePassword },
          { required: true, validator: validatePass, trigger: "blur" },
        ],
        repeatPwd: [
          { required: true, message: this.$t("Permission.PermissionUser.EnterConfirmNewPassword") },
          { validator: this.checkPwd, trigger: "blur" },
          { required: true, validator: validatePass, trigger: "blur" },
        ],
      },

      searchUserLoading: false,

      formLoading: false,
    };
  },
  computed: {
    btn() {
      return this.$t("Permission.buttons");
    },
    dataList() {
      return this.$t("Permission.PermissionUser");
    },
  },
  watch: {
    value: function() {
      this.dialogVisible = this.value;
      if (this.value) {
        this.init();
      }
    },
  },
  created() {},
  beforeDestroy() {
    this.handleClose();
  },
  methods: {
    // 初始化

    // 提交表单
    submitForm() {
      // 校验表单必填项
      this.$refs.formData.validate((valid) => {
        if (valid) {
          this.submitReadOnly = true;
          this.submitLoad = true;
          // 当前编辑ID是否存在 存在则去更新用户信息
          const requestData = JSON.parse(JSON.stringify(this.formData));
          UpdatePassword(requestData)
            .then((res) => {
              this.SuccessfulOperation();
            })
            .catch(() => {
              this.submitLoad = false;
              this.submitReadOnly = false;
            });
        } else {
          this.$message.error(this.$t("Permission.buttons.PleaseComplete"));
        }
      });
    },

    // 操作成功回调用
    SuccessfulOperation() {
      this.submitLoad = false;
      this.submitReadOnly = false;
      // this.$message.success("操作成功");
      this.$emit("success");
      this.handleClose();
    },
    // 关闭弹框
    handleClose() {
      this.$emit("input", false);
    },
    // 关闭弹框动画结束
    closedDialog() {
      // 动画结束后在清空表单 防止页面闪烁
      this.$refs.formData.resetFields();
    },
    // 校验二次密码
    checkPwd(rule, value, callback) {
      if (value === "") {
        callback(new Error(this.$t("Permission.PermissionUser.PleaseEnterPasswordAgain")));
      } else if (value !== this.formData.password) {
        callback(new Error(this.$t("Permission.PermissionUser.twoPasswords")));
      } else {
        callback();
      }
    },
    validatePassword(rule, value, callback) {
      if (value.length < 6) {
        callback(new Error(this.$t("Permission.PermissionUser.Password15Characters")));
      } else {
        callback();
      }
    },
  },
};
</script>

<style lang="scss" scoped></style>
